<template>
    <div id="bargain">

        <div id="bargain-header" @click="gotoDown()">
            全民砍价<van-icon name="arrow" />
        </div>

        <div 
            id="bargain-container"
            v-for="(item,index) in bargain"
            :key="index"
            @click="gotoDown()">
            <img :src="item.pic" alt="">
            <div class="bargain-container-box">
                <div class="bargain-container-box-p">{{item.name}}</div>
                <div class="bargain-container-box-price">
                    <div class="bargain-container-box-price-flex">
                        <div>
                            <b>￥{{item.minPrice}}</b>
                            <div>低价</div>
                        </div>
                        <div class="num">
                            <div>￥{{item.originalPrice}}</div>
                            <div>原价</div>
                        </div>
                        <div class="num">
                            <div>{{item.minScore}}件</div>
                            <div>限量</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div> 
</template>

<script>
export default {
    data() {
        return {
            bargain:[],
        }
    },
    mounted() {
        // 全民砍价
        this.$API.getStoreList().then((res)=>{
            console.log(res);
            this.bargain = res.data.data;
            this.bargain = this.bargain.splice(25,28);
        }).catch((error)=>{
            console.log(error);
        });
    },
    methods: {
        // 点击 进入全民砍价列表页
        gotoDown(){
            this.$router.push("/Downlist");
        }
    },
}
</script>

<style lang="scss">
#bargain{
    width: 100%;
    background-color: #fff;
    // margin-top:0.2rem;
    margin-top:10px;
    #bargain-header{
        width: 100%;
        padding:14px 0;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        .van-icon{
            // margin-left:0.3rem;
            margin-left:10px;
        }
    }
    #bargain-container{
        width:100%;
        text-align: left;
        display: inline-flex;
        justify-content: flex-start;
        align-items: flex-start;
        img{
            width:29%;
            border-radius: 5px;
            margin: 0 8px;
        }
        .bargain-container-box{
            width:100%;
            // font-size: 0.31rem;
            .bargain-container-box-p{
                width:100%;
            }
            .bargain-container-box-price{
                width:85%;
                // height:1.68rem;
                height:84px;
                font-size: 14px;
                // font-size: 0.27rem;
                display: inline-flex;
                justify-content: flex-start;
                align-items: flex-end;
                .bargain-container-box-price-flex{
                    width:100%;
                    display: inline-flex;
                    justify-content: space-between;
                    align-items: flex-end;  
                    div{
                        text-align: center;
                        b{
                            color:red;
                        }
                    } 
                    .num{
                        color:#B2B2B2;
                    }
                }
            }
        }
    }
}
</style>